Oznake obrazcev: Bistvene zahteve za dostopnost vnosnih polj

Obrazci so temeljni del spleta. Od preprostih kontaktnih obrazcev do zapletenih blagajn v e-trgovinah omogočajo uporabnikom interakcijo s spletnimi stranmi in aplikacijami. Vendar pa lahko slabo zasnovani obrazci predstavljajo velike ovire za uporabnike z oviranostmi. Ključni element pri ustvarjanju dostopnih obrazcev je pravilna uporaba oznak obrazcev. Ta vodnik ponuja celovit pregled zahtev za dostopnost oznak obrazcev, s čimer zagotavlja, da so vaši obrazci uporabni za vse, ne glede na njihove zmožnosti.

Zakaj so dostopne oznake obrazcev pomembne?

Dostopne oznake obrazcev so ključnega pomena iz več razlogov:

• Uporabnost: Jasne in jedrnate oznake pomagajo vsem uporabnikom razumeti namen vsakega vnosnega polja, kar izboljša splošno uporabnost.
• Dostopnost: Oznake zagotavljajo bistvene informacije za uporabnike z oviranostmi, zlasti za tiste, ki se zanašajo na podporne tehnologije, kot so bralniki zaslona. Brez ustreznih oznak ti uporabniki morda ne bodo mogli izpolniti obrazcev.
• Skladnost z WCAG: Smernice za dostopnost spletnih vsebin (WCAG) zahtevajo, da imajo vsi kontrolniki obrazcev povezane oznake. Izpolnjevanje teh smernic zagotavlja, da je vaša spletna stran dostopna in zakonsko skladna v številnih jurisdikcijah.
• SEO: Čeprav ni neposreden dejavnik uvrščanja, imajo dostopne spletne strani običajno boljšo uporabniško izkušnjo, kar lahko posredno izboljša učinkovitost SEO.

Razumevanje zahtev WCAG za oznake obrazcev

WCAG ponuja posebne smernice za zagotavljanje dostopnosti obrazcev. Tu so ključne zahteve v zvezi z oznakami obrazcev:

Kriterij uspešnosti WCAG 2.1 1.1.1 Netekstovna vsebina (Raven A)

Čeprav se ne nanaša neposredno na oznake, ta kriterij poudarja pomembnost zagotavljanja besedilnih alternativ za vso netekstovno vsebino, vključno s CAPTCHA in slikami, ki se uporabljajo v obrazcih. Pravilno označeni obrazec je ključnega pomena za zagotavljanje konteksta tem alternativam.

Kriterij uspešnosti WCAG 2.1 1.3.1 Informacije in razmerja (Raven A)

Informacije, struktura in razmerja, ki se prenašajo s predstavitvijo, morajo biti programsko določljivi ali na voljo v besedilu. To pomeni, da mora biti razmerje med oznako in ustreznim vnosnim poljem eksplicitno definirano v kodi HTML.

Kriterij uspešnosti WCAG 2.1 2.4.6 Naslovi in oznake (Raven AA)

Naslovi in oznake opisujejo temo ali namen. Oznake obrazcev zagotavljajo opisni kontekst za vnosna polja, kar uporabnikom olajša razumevanje strukture obrazca in njegovo pravilno izpolnjevanje.

Kriterij uspešnosti WCAG 2.1 3.3.2 Oznake ali navodila (Raven A)

Oznake ali navodila so na voljo, kadar vsebina zahteva vnos uporabnika.

Kriterij uspešnosti WCAG 2.1 4.1.2 Ime, vloga, vrednost (Raven A)

Za vse komponente uporabniškega vmesnika (vključno, a ne omejeno na elemente obrazcev, povezave in komponente, ki jih generirajo skripte) je mogoče programsko določiti ime in vlogo; stanja, lastnosti in vrednosti, ki jih lahko nastavi uporabnik, je mogoče programsko nastaviti; in obvestila o spremembah teh elementov so na voljo uporabniškim agentom, vključno s podpornimi tehnologijami.

Najboljše prakse za implementacijo dostopnih oznak obrazcev

Tukaj je nekaj najboljših praks za ustvarjanje dostopnih oznak obrazcev:

1. Uporabite element <label>

Element <label> je primarni način za povezovanje besedilne oznake z vnosnim poljem. Zagotavlja semantično in strukturno povezavo med oznako in kontrolnikom. Atribut for elementa <label> se mora ujemati z atributom id ustreznega vnosnega polja.

Primer:

<label for="name">Ime:</label>
<input type="text" id="name" name="name">

Nepravilen primer (izogibajte se):

<span>Ime:</span>
<input type="text" id="name" name="name">

Uporaba elementa span namesto label ne ustvari potrebne programske povezave, zaradi česar je nedostopna za bralnike zaslona.

2. Eksplicitno povežite oznake z vnosnimi polji

Zagotovite jasno in eksplicitno povezavo med oznako in vnosnim poljem z uporabo atributov for in id, kot je prikazano v zgornjem primeru.

3. Pravilno postavite oznake

Postavitev oznak lahko vpliva na uporabnost. Na splošno naj bodo oznake postavljene:

• Nad vnosnim poljem: To je pogosto najbolj dostopna in uporabniku prijazna možnost, zlasti za besedilna polja in območja z besedilom.
• Levo od vnosnega polja: Pogosto, vendar je lahko manj učinkovito za uporabnike z okvarami vida, ki imajo lahko težave pri pregledovanju strani.
• Za izbirne gumbe in potrditvena polja: Oznake naj bodo postavljene desno od kontrolnika.

Pri postavljanju oznak upoštevajte kulturne norme. V nekaterih jezikih so oznake tradicionalno postavljene za vnosnim poljem. Prilagodite svojo zasnovo, da bo ustrezala tem preferencam.

4. Zagotovite jasne in jedrnate oznake

Oznake morajo biti kratke, opisne in lahko razumljive. Izogibajte se žargonu ali tehničnim izrazom, ki bi lahko zmedli uporabnike. Na primer, namesto "UserID" uporabite "Uporabniško ime" ali "E-poštni naslov". Upoštevajte lokalizacijo. Zagotovite, da so vaše oznake enostavno prevedljive v različne jezike, hkrati pa ohranijo svoj pomen.

5. Po potrebi uporabite atribute ARIA

Atributi ARIA (Accessible Rich Internet Applications) lahko izboljšajo dostopnost elementov obrazca, zlasti v zapletenih scenarijih. Vendar pa ARIA uporabljajte preudarno in le takrat, ko izvorni elementi in atributi HTML ne zadoščajo.

• aria-label: Ta atribut uporabite za zagotavljanje oznake, kadar vidna oznaka ni mogoča ali praktična.
• aria-labelledby: Ta atribut uporabite za sklicevanje na ID obstoječega elementa na strani, ki služi kot oznaka.
• aria-describedby: Ta atribut uporabite za zagotavljanje dodatnih informacij ali navodil za vnosno polje. To je uporabno za zagotavljanje konteksta ali pojasnjevanje pravil validacije.

Primer z uporabo aria-label:

<input type="search" aria-label="Išči po spletni strani">

Primer z uporabo aria-labelledby:

<h2 id="newsletter-title">Naročanje na e-novice</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Vnesite svoj e-poštni naslov">

6. Združite povezane elemente obrazca z <fieldset> in <legend>

Element <fieldset> združuje povezane kontrolnike obrazca, element <legend> pa zagotavlja napis za fieldset. To izboljša strukturo obrazca in uporabnikom olajša razumevanje razmerij med različnimi vnosnimi polji.

Primer:

<fieldset>
  <legend>Kontaktni podatki</legend>
  <label for="name">Ime:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-pošta:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Zagotovite jasna sporočila o napakah

Ko uporabniki naredijo napake pri izpolnjevanju obrazca, zagotovite jasna in informativna sporočila o napakah, ki pojasnjujejo, kaj je šlo narobe in kako napako popraviti. Ta sporočila o napakah povežite z ustreznimi vnosnimi polji z uporabo atributov ARIA, kot je aria-describedby.

Primer:

<label for="email">E-pošta:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Prosimo, vnesite veljaven e-poštni naslov.</span>

Zagotovite, da je sporočilo o napaki vizualno razločno (npr. z uporabo barve ali ikon) in programsko dostopno podpornim tehnologijam.

8. Uporabite zadosten barvni kontrast

Zagotovite zadosten barvni kontrast med besedilom oznake in barvo ozadja, da boste izpolnili zahteve WCAG. Uporabite orodje za analizo barvnega kontrasta, da preverite, ali razmerje kontrasta ustreza minimalnim zahtevam (4.5:1 za običajno besedilo in 3:1 za veliko besedilo). To pomaga uporabnikom s slabšim vidom lažje brati oznake.

9. Zagotovite dostopnost s tipkovnico

Vsi elementi obrazca morajo biti dostopni samo s tipkovnico. Uporabniki bi morali imeti možnost navigacije po obrazcu s tipko Tab in interakcije s kontrolniki obrazca s preslednico ali tipko Enter. Temeljito preizkusite svoje obrazce s tipkovnico, da zagotovite ustrezno dostopnost s tipkovnico.

10. Testirajte s podpornimi tehnologijami

Najboljši način za zagotovitev dostopnosti vaših obrazcev je, da jih preizkusite s podpornimi tehnologijami, kot so bralniki zaslona (npr. NVDA, JAWS, VoiceOver). To vam bo pomagalo prepoznati morebitne težave z dostopnostjo, ki morda niso očitne med vizualnim pregledom. V svoj postopek testiranja vključite uporabnike z oviranostmi, da dobite dragocene povratne informacije.

Primeri implementacij dostopnih oznak obrazcev

Primer 1: Enostaven kontaktni obrazec (mednarodna perspektiva)

Razmislite o kontaktnem obrazcu za globalno občinstvo. Oznake morajo biti jasne, jedrnate in enostavno prevedljive.

<form>
  <label for="name">Polno ime:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-poštni naslov:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Država:</label>
  <select id="country" name="country">
    <option value="">Izberite državo</option>
    <option value="us">Združene države</option>
    <option value="ca">Kanada</option>
    <option value="uk">Združeno kraljestvo</option>
    <option value="de">Nemčija</option>
    <option value="fr">Francija</option>
    <option value="jp">Japonska</option>
    <option value="au">Avstralija</option>
    <!-- Dodajte več držav -->
  </select><br><br>

  <label for="message">Sporočilo:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Pošlji">
</form>

Upoštevajte uporabo izraza "Polno ime" namesto samo "Ime" za jasnost, zlasti za kulture, kjer priimki sledijo pred imeni.

Primer 2: Obrazec za zaključek nakupa v e-trgovini

Obrazci za zaključek nakupa v e-trgovini pogosto zahtevajo občutljive podatke. Jasne oznake in navodila so ključnega pomena za gradnjo zaupanja in zagotavljanje dostopnosti.

<form>
  <fieldset>
    <legend>Naslov za dostavo</legend>
    <label for="shipping_name">Polno ime:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Naslov:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Mesto:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Poštna številka:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Država:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Izberite državo</option>
      <option value="us">Združene države</option>
      <option value="ca">Kanada</option>
      <!-- Dodajte več držav -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Podatki o plačilu</legend>
    <label for="card_number">Številka kreditne kartice:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Datum poteka (MM/LL):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/LL"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Oddaj naročilo">
</form>

Uporaba fieldsetov in legend jasno organizira obrazec v logične odseke. Besedilo v označbi mesta (placeholder) nudi dodatna navodila, vendar ne pozabite, da se besedilo v označbi mesta ne sme uporabljati kot nadomestek za oznake.

Primer 3: Registracijski obrazec z atributi ARIA

Razmislite o registracijskem obrazcu, kjer je vzdevek neobvezen. Z uporabo atributov ARIA lahko zagotovimo dodaten kontekst.

<form>
  <label for="username">Uporabniško ime:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Geslo:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Vzdevek (neobvezno):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ta vzdevek bo javno prikazan.<br><br>

  <input type="submit" value="Registracija">
</form>

Atribut aria-describedby povezuje vnosno polje za vzdevek z elementom span, ki zagotavlja dodatne informacije o tem, kako se bo vzdevek uporabljal.

Orodja za testiranje dostopnosti obrazcev

Več orodij vam lahko pomaga oceniti dostopnost vaših obrazcev:

• Accessibility Insights: Razširitev za brskalnik, ki prepoznava težave z dostopnostjo na spletnih straneh.
• WAVE (Web Accessibility Evaluation Tool): Spletno orodje, ki ocenjuje spletne strani glede na napake v dostopnosti.
• axe DevTools: Razširitev za brskalnik, ki izvaja avtomatizirano testiranje dostopnosti.
• Bralniki zaslona (NVDA, JAWS, VoiceOver): Testiranje z bralniki zaslona je ključno za prepoznavanje težav z dostopnostjo, ki morda niso očitne pri avtomatiziranem testiranju.

Zaključek

Dostopne oznake obrazcev so bistvenega pomena za ustvarjanje vključujočih spletnih izkušenj. Z upoštevanjem najboljših praks, opisanih v tem vodniku, lahko zagotovite, da so vaši obrazci uporabni za vse, ne glede na njihove zmožnosti. Dajanje prednosti dostopnosti ne koristi le uporabnikom z oviranostmi, temveč izboljša tudi splošno uporabnost vaše spletne strani za vse uporabnike. Ne pozabite redno testirati svojih obrazcev s podpornimi tehnologijami in v postopek testiranja vključiti uporabnike z oviranostmi, da dobite dragocene povratne informacije in nenehno izboljšujete dostopnost vaše spletne strani.

Sprejemanje dostopnosti ni le vprašanje skladnosti; gre za ustvarjanje bolj vključujočega in pravičnega spleta za vse. Z vlaganjem v dostopno oblikovanje obrazcev izkazujete zavezanost vključevanju in ustvarjate boljšo uporabniško izkušnjo za vse.